Created:01/04/2020
By: TeamXcel
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Saas Startup HTML Template">
<meta name="author" content="TeamXcel">
<title>SaasKit | Saas Startup HTML Template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontawesome.min.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/elegant-line-icons.css">
<link rel="stylesheet" href="css/elegant-font-icons.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slicknav.min.css">
<link rel="stylesheet" href="css/pricing-table.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section transparent">
</header><!--.header-section -->
<section class="hero-section d-flex align-items-center">
</section><!-- /.hero-section -->
<section class="promo-section padding bd-bottom">
</section><!-- /.promo section -->
<section class="content-section padding bg-grey bd-bottom">
</section><!-- /.content-section -->
<section class="feature-section padding bd-bottom">
</section><!-- /.feature-section -->
<section class="content-area-section padding bd-bottom">
</section><!-- /.content-area-section-->
<section class="pricing-section padding bd-bottom bg-grey">
</section><!-- /.pricing-section-->
<section class="team-section padding bd-bottom">
</section><!-- /.team-section -->
<section class="testimonial-section bg-grey bd-bottom padding">
</section><!--/.testimonial-section-->
<section class="blog-section padding bd-bottom">
</section><!--/.blog-section-->
<section class="cta-section padding">
</section><!--/.cta-section-->
<footer class="footer-section">
</footer><!-- /.footer-section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/tether.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/smooth-scroll.min.js"></script>
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<script src="js/vendor/pricing-switcher.js"></script>
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section transparent"> <div class="container"> <nav class="navbar "> <a href="index.html" class="navbar-brand"> <img class="logo-light" src="img/logo-light.png" alt="Saasbiz"> <img class="logo-dark" src="img/logo-dark.png" alt="Saasbiz"> </a> <div class="d-flex menu-wrap"> <div id="mainmenu" class="mainmenu"> <ul class="nav"> <li><a data-scroll class="nav-link active" href="index.html">Home<span class="sr-only">(current)</span></a> </li> <li><a href="about.html">About Us</a></li> <li><a href="features.html">Features</a></li> <li><a href="#">Pages</a> <ul> <li><a href="team.html">Our Team</a></li> </ul> </li> <li><a href="#">Blog</a> <ul> <li><a href="blog-grid.html">Blog Grid</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div class="header-right"> <a class="menu-btn btn-white" href="#">Sign Up Now</a> </div> </div> </nav> </div> </header><!--.header-section -->
<section class="hero-section d-flex align-items-center"> <div class="anim-elements"> <div class="anim-element"></div> </div> <div class="container"> <div class="hero-wrap row"> <div class="col-md-6"> <div class="hero-content"> <span>Welcome to SaasKit</span> <h2>Let’s build something that your users will love.</h2> <p>Save time while using the fastest theme builder in WordPress. Use inspirelite<br> beautiful intuitive interface to create any type of form</p> <a href="#" class="default-btn">Get Started Now <span></span></a> </div> </div> <div class="col-md-6"> <div class="hero-content d-none d-md-block"> <img src="img/SaaS-2.png" alt="saas"> </div> </div> </div> </div> </section><!-- /.hero-section -->
<section class="promo-section padding bd-bottom"> <div class="container"> <div class="promo-wrap row"> <div class="col-md-4 xs-padding"> <div class="promo-content"> <i class="ti-import color-red bg-red"></i> <h3>Fast and optimized</h3> <p>Unlike team chat apps, Flow is designed to help your team stay focused by keeping relevant</p> </div> </div> </div> </div> </section><!-- /.promo section -->
<section class="content-section padding bg-grey bd-bottom"> <div class="container"> <div class="content-wrap row"> <div class="col-lg-6 sm-padding"> <div class="content-img"> <img src="img/macbook-dashboard.svg" alt="content"> </div> </div> <div class="col-lg-6 sm-padding"> <div class="section-heading mb-40"> <h2>Why Choose Us</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused by keeping relevant and actionable </p> </div> <ul class="content-info"> <li> <h3><span class="bg-red color-red">1</span> Best Performance</h3> <p>A complete about-face in its core economy <br> business Amsterdams .</p> </li> </ul> </div> </div> </div> </section><!-- /.content-section -->
<section class="feature-section padding bd-bottom"> <div class="anim-elements"> <div class="anim-element"></div> </div> <div class="container"> <div class="section-heading mb-40 text-center"> <span>Features</span> <h2>Benefits of SaasKit</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> </div> <div class="feature-wrap row"> <div class="col-lg-3 col-sm-6 padding-15"> <div class="feature-content bg-red"> <i class="icon_documents color-red"></i> <h3>SEO & Backlinks.</h3> <p>A complete about its core economy Amsterdams progressive</p> </div> </div> </div> </div> </section><!-- /.feature-section -->
<section class="content-area-section padding bd-bottom"> <div class="container"> <div class="content-wrap row"> <div class="col-md-6"> <div class="content-item"> <h2>We craft marketing & digital products businesses.</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable.A complete about-face in its core <br>economy business Amsterdams.A complete about its core economy <br>Amsterdams progressive</p> <a href="#" class="default-btn">Buy Now</a> </div> </div> <div class="col-md-6"> <div class="content-img"> <img src="img/SaaS-4.png" alt="saas"> </div> </div> </div> </div> </section><!-- /.content-area-section-->
<section class="pricing-section padding bd-bottom bg-grey"> <div class="container"> <div class="section-heading mb-40 text-center"> <span>Pricing Table</span> <h2>Plans & Pricing</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> </div> <div class="cd-pricing-switcher-container"> <div class="cd-pricing-switcher text-center"> <p class="fieldset"> <input type="radio" name="duration-1" value="monthly" id="monthly-1" checked> <label for="monthly-1">Monthly</label> <input type="radio" name="duration-1" value="yearly" id="yearly-1"> <label for="yearly-1">Yearly</label> <span class="cd-switch"></span> </p> </div> </div> <!-- .cd-pricing-switcher --> <div class="row"> <div class="col-lg-12 xs-padding"> <div class="pricing-wrap cd-pricing-container"> <ul class="cd-pricing-list cd-bounce-invert row"> <li class="cd-popular col-lg-4"> <ul class="cd-pricing-wrapper"> <li data-type="monthly" class="is-visible pricing-box"> <div class="pricing-head"> <img src="img/pricing-icon-1.png" alt="image"> <h3>$29.00</h3> <span>Starter</span> </div> <ul class="pricing-list"> <li>1024 MB Memory</li> <li>10 Websites</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <div class="pricing-footer"> <a href="#" class="default-btn btn-blue">Get Started</a> </div> </li> </ul> <!-- .cd-pricing-wrapper --> </li> <li class="col-lg-4"> <ul class="cd-pricing-wrapper"> <li data-type="monthly" class="is-visible pricing-box"> <div class="price-tag"><span>Recommended</span></div> <div class="pricing-head"> <img src="img/pricing-icon-3.png" alt="image"> <h3>$49.00</h3> <span>Premium</span> </div> <ul class="pricing-list"> <li>1024 MB Memory</li> <li>10 Websites</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <div class="pricing-footer"> <a href="#" class="default-btn btn-blue">Get Started</a> </div> </li> </ul> <!-- .cd-pricing-wrapper --> </li> <li class="col-lg-4"> <ul class="cd-pricing-wrapper"> <li data-type="monthly" class="is-visible pricing-box"> <div class="pricing-head"> <img src="img/pricing-icon-2.png" alt="image"> <h3>$89.00</h3> <span>Business</span> </div> <ul class="pricing-list"> <li>1024 MB Memory</li> <li>10 Websites</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <div class="pricing-footer"> <a href="#" class="default-btn btn-blue">Get Started</a> </div> </li> </ul> <!-- .cd-pricing-wrapper --> </li> </ul> <!-- .cd-pricing-list --> </div> </div> </div> </div> </section><!-- /.pricing-section-->
<section class="team-section padding bd-bottom"> <div class="container"> <div class="section-heading mb-40 text-center"> <span>Our Team</span> <h2>Expart Team Members</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> </div> <div class="team-wrap row"> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="team-box"> <div class="team-info"> <img src="img/team-1-copyright-490x554.jpg" alt="image"> <ul class="team-social"> <li><a href="#" class="fab fa-facebook"></a></li> <li><a href="#" class="fab fa-instagram"></a></li> <li><a href="#" class="fab fa-twitter"></a></li> <li><a href="#" class="fab fa-behance"></a></li> </ul> </div> <div class="team-content"> <h3>Adam Zeilanski</h3> <span>Developer</span> </div> </div> </div> </div> </div> </section><!-- /.team-section -->
<section class="testimonial-section bg-grey bd-bottom padding"> <div class="container"> <div class="section-heading mb-40 text-center"> <span>Testimonials</span> <h2>Clients Testimonial</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> </div> <div id="testimonial-carousel" class="testimonial-carousel owl-carousel"> <div class="testi-item d-flex align-items-center"> <img src="img/testi-1.jpg" alt="img"> <div class="testi-content"> <p>"Thank you for guiding us through the construction process, understanding, and always ready to accommodate our needs. We love our new space and know that it was built by the very best!"</p> <h3>Kyle Frederick</h3> <ul class="rattings"> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> <li><i class="fa fa-star"></i></li> </ul> <span>Director</span> </div> <i class="fa fa-quote-right"></i> </div> </div> </div> </section><!--/.testimonial-section-->
<section class="blog-section padding bd-bottom"> <div class="container"> <div class="section-heading mb-40 text-center"> <span>From Blog</span> <h2>Speciallized News</h2> <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> </div> <div class="row blog-wrap"> <div class="col-lg-4 col-sm-6 sm-padding"> <div class="blog-item"> <div class="blog-thumb"> <img src="img/post-1.jpg" alt="post"> <span class="category"><a href="#">interior</a></span> </div> <div class="blog-content"> <h3><a href="#">Minimalist trending in modern architecture 2019</a></h3> <p>Building first evolved out dynamics between needs means available building materials attendant skills.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> </div> </div> </section><!--/.blog-section-->
<section class="cta-section padding"> <div class="overlay"></div> <div class="container"> <div class="cta-wrap row"> <div class="col-md-8"> <div class="cta-content"> <h2>Ready To Get Started? It's Fast <br>Free And Very Easy!</h2> </div> </div> <div class="col-md-4"> <div class="cta-btn"> <a href="#" class="default-btn">Get Started <span></span></a> </div> </div> </div> </div> </section><!--/.cta-section-->
<footer class="footer-section"> <div class="container"> <div class="row padding"> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="widget-content"> <a href="#"><img src="img/logo-light.png" alt="brand"></a> <p>Building your own home is about desire, fantasy. But it’s achievable anyone can do it.</p> </div> </div> <div class="col-lg-2 col-sm-6 sm-padding"> <div class="widget-content"> <h4>Company</h4> <ul class="widget-links"> <li><a href="#">About Us</a></li> </ul> </div> </div> <div class="col-lg-3 col-sm-6 sm-padding"> <div class="widget-content"> <h4>Headquaters</h4> <p>962 Fifth Avenue, 3rd Floor New York, NY10022</p> <span>Hello@TeamXcel.net</span> <span>(+123) 456 789 101</span> </div> </div> <div class="col-lg-4 col-sm-6 sm-padding"> <div class="widget-content"> <h4>Newslatter Subscription</h4> <p>Subscribe and get 10% off from our <br>architecture company.</p> <div class="subscribe-box clearfix"> <div class="subscribe-form-wrap"> <form action="#" class="subscribe-form"> <input type="email" name="email" id="subs-email" class="form-input" placeholder="Enter Your Email Address..."> <button type="submit" class="submit-btn">Subscribe</button> <div id="subscribe-result"> <p class="subscription-success"></p> <p class="subscription-error"></p> </div> </form> </div> </div> </div> </div> </div> <div class="footer-text text-center"> <p>© 2020 SaasKit Powered by TeamXcel</p> </div> </div> </footer><!-- /.footer-section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel